<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ichartjs 示例</title>
		<meta name="Description" content="The ichartjs's gallery center,ichartjs 示例中心" />
		<meta name="Keywords" content="ichartjs demo,Html5 demo,ichartjs示例,ichartjs示例,Html5示例,Html5示例" />
		<script type="text/javascript" src="../../ichart.1.2.1.min.js"></script>
		<link rel="stylesheet" href="../css/demo.css" type="text/css"/>
		<script type="text/javascript">
					$(function(){
						var pv=[],ip=[],t;
						for(var i=0;i<61;i++){
							t = Math.floor(Math.random()*(30+((i%12)*5)))+10;
							pv.push(t);
							t = Math.floor(t*0.5);
							t = t-Math.floor((Math.random()*t)/2);
							ip.push(t);
						}
						
						var data = [
						         	{
						         		name : 'PV',
						         		value:pv,
						         		color:'#0d8ecf',
						         		line_width:2
						         	},
						         	{
						         		name : 'IP',
						         		value:ip,
						         		color:'#ef7707',
						         		line_width:2
						         	}
						         ];
				         
						var labels = ["2012-08-01","2012-08-02","2012-08-03","2012-08-04","2012-08-05","2012-08-06"];
						var line = new iChart.LineBasic2D({
							render : 'canvasDiv',
							data: data,
							align:'center',
							title : 'ichartjs官方网站最近5天流量趋势',
							subtitle : '平均每个人访问2-3个页面(访问量单位：万)',
							footnote : '数据来源：模拟数据',
							width : 800,
							height : 400,
							tip:{
								enable:true,
								shadow:true
							},
							legend : {
								enable : true,
								row:1,//设置在一行上显示，与column配合使用
								column : 'max',
								valign:'top',
								sign:'bar',
								background_color:null,//设置透明背景
								offsetx:-80,//设置x轴偏移，满足位置需要
								border : true
							},
							crosshair:{
								enable:true,
								line_color:'#62bce9'
							},
							sub_option : {
								label:false,
								point_hollow : false
							},
							coordinate:{
								width:640,
								height:240,
								axis:{
									color:'#9f9f9f',
									width:[0,0,2,2]
								},
								grids:{
									vertical:{
										way:'share_alike',
								 		value:5
									}
								},
								scale:[{
									 position:'left',	
									 start_scale:0,
									 end_scale:100,
									 scale_space:10,
									 scale_size:2,
									 scale_color:'#9f9f9f'
								},{
									 position:'bottom',	
									 labels:labels
								}]
							}
						});
					
					//开始画图
					line.draw();
				});
				
			</script>
		</head>
		<body>
			<div id='canvasDiv'></div>
			<div class='ichartjs_info'>
				<span class='ichartjs_author'>written by <a title="示例的贡献者" href="mailto:taylor@ichartjs.com">taylor</a></span>
				<span class='ichartjs_btn' onmouseover="this.style.color='#2f99ff'" onmouseout="this.style.color='#0b2946'" onclick="window.top.viewCode(document);">View Code</span>
				<div class='ichartjs_sm'>说明</div>
				<div class='ichartjs_details'>
					这是一个很常见的的折线图示例，示例展示了网站最近5天的流量统计。每隔2个小时统计一次。通过统计图可以看出每天晚上18：00-22：00访问量较大。每个人平均访问2-3个页面。
				</div>
				<span class='ichartjs_sm'>备注：</span>
				<span class='ichartjs_details'>
					数据均为模拟。
				</span>
			</div>
		</body>
</html>

